<template>
  <view class="container">
    <!-- 头部统计信息 -->
    <view class="stats">
      <view class="stat-item">
        <text class="stat-label">学习待办</text>
        <text class="stat-value">{{ planCount.studyCount }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-label">工作待办</text>
        <text class="stat-value">{{ planCount.workCount }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-label">生活待办</text>
        <text class="stat-value">{{ planCount.lifeCount }}</text>
      </view>
    </view>
    <!-- 标语, 每天随机一条 -->
    <quoteComponent />
    <!-- 底部导航 -->
    <view class="bottom-tab">
      <view :class="classNameArr[0]" @click="changeTab(0)">学习计划</view>
      <view :class="classNameArr[1]" @click="changeTab(1)">工作计划</view>
      <view :class="classNameArr[2]" @click="changeTab(2)">生活计划</view>
      <view :class="classNameArr[3]" @click="changeTab(3)">计数</view>
    </view>
    <!-- 任务列表 -->
    <view class="task-list" v-if="tabNumNow == 3">
      <!-- 使用 uni-swipe-action 包裹每个 task-item -->
      <uni-swipe-action v-for="task in countTasks" :key="task.id">
        <uni-swipe-action-item>
          <!-- 左滑时显示的操作按钮 -->
          <template v-slot:right>
            <view class="swipe-buttons">
              <button @click="handleComplete(task.id)" class="complete-btn">完成</button>
            </view>
          </template>
          <!-- 正常的 task-item 内容 -->
          <view class="task-item">
            <view class="task-time">更新时间: {{ task.updateTime }}</view>
            <text class="task-title">{{ task.title }}</text>
            <view class="task-count">
              <text>{{ task.count }}</text>
              <button class="add-count-button" @click="incrementCount(task.id)">+</button>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
    <!-- 任务列表 -->
    <view class="task-list" v-if="tabNumNow != 3">
      <!-- 使用 uni-swipe-action 包裹每个 task-item -->
      <uni-swipe-action v-for="task in tasks" :key="task.id">
        <uni-swipe-action-item>
          <!-- 左滑时显示的操作按钮 -->
          <template v-slot:right>
            <view class="swipe-buttons">
              <button @click="handleComplete(task.id)" class="complete-btn">完成</button>
            </view>
          </template>
          <!-- 正常的 task-item 内容 -->
          <view class="task-item">
            <view class="task-time">更新时间: {{ task.updateTime }}</view>
            <text class="task-title">{{ task.title }}</text>
            <view class="task-priority" :class="getPriorityClass(task.priority)">
              {{ getPriorityLabel(task.priority) }}
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import quoteComponent from '@/components/quoteComponent.vue';
import { commonPlanCount, commonPlanList, commonPlanUpdateStatus } from '@/api/commonPlan/commonPlan';
import UniSwipeAction from '../../uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue'
import uniSwipeActionItem from '../../uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue'
import { countPlanCountIncr, countPlanList } from '@/api/countPlan/countPlan';
import { onShow } from '@dcloudio/uni-app';

interface Task {
  id?: number;          // 可选字段
  uid?: number;         // 可选字段
  title?: string;       // 可选字段
  updateTime?: string;  // 可选字段
  priority?: number;    // 可选字段
  status?: number;      // 可选字段
  type?: number;      // 可选字段
}
interface CountTask {
  id?: number;
  title?: string;
  status?: number;
  updateTime?: Date;
  count?: number; // 新增 count 属性
}

// Tab栏相关
const tabNumNow = ref(0); // 当前选中的Tab索引
const tabs = ['Tab1', 'Tab2', 'Tab3', 'Tab4']; // Tab栏的标题
const classNameArr = ref<string[]>([]); // Tab栏的类名数组
// 初始化Tab栏的类名
const initTabs = () => {
  classNameArr.value = tabs.map((_, index) =>
    index === tabNumNow.value ? 'tab-item-active' : 'tab-item-default'
  );
};
initTabs(); // 初始化
// 切换Tab, 同时切换任务列表
const changeTab = async (tabNum: number) => {
  tabNumNow.value = tabNum;
  classNameArr.value = tabs.map((_, index) =>
    index === tabNumNow.value ? 'tab-item-active' : 'tab-item-default'
  );
  init();
};
// 任务列表获取,
const tasks = ref<Task[]>(null);
const countTasks = ref<CountTask[]>(null);
const init = async () => {
  if (tabNumNow.value != 3) {
    const res = await commonPlanList(tabNumNow.value, 0);
    tasks.value = res.data;
  } else {
    const res = await countPlanList(0);
    countTasks.value = res.data;
  }
}
// 待办count
// 查询每日待办
interface CommonPlanCount {
  studyCount: number;
  workCount: number;
  lifeCount: number;
}
const planCount = ref<CommonPlanCount>({
  studyCount: 0,
  workCount: 0,
  lifeCount: 0
})
const countInit = async () => {
  const res = await commonPlanCount();
  planCount.value = res.data;
}
onShow(() => {
  init();
  countInit();
});

// 提交任务
const submitTask = async (task: Task) => {
  uni.showToast({
    title: `提交任务：${task.title}`,
    icon: 'success',
  });
  await commonPlanUpdateStatus(task.id);
  init();
};



// 获取优先级标签
const getPriorityLabel = (priority: number) => {
  if (priority >= 1 && priority <= 3) return '低优先级';
  if (priority >= 4 && priority <= 6) return '中优先级';
  if (priority >= 7 && priority <= 9) return '高优先级';
  return '未知';
};

// 获取优先级类名
const getPriorityClass = (priority: number) => {
  if (priority >= 1 && priority <= 3) return 'priority-low';
  if (priority >= 4 && priority <= 6) return 'priority-medium';
  if (priority >= 7 && priority <= 9) return 'priority-high';
  return '';
};


const handleComplete = async (taskId: number) => {
  console.log('完成任务:', taskId);
  await commonPlanUpdateStatus(taskId);
  init();
};
// 增加任务数量
const incrementCount = async (taskId: number) => {
  const res = await countPlanCountIncr(taskId);
  if (res.data == false) {
    uni.showToast({
      title: '今天已经努力过啦, 明天继续努力!',
      icon: 'none',
    });
  } else {
    init();
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  height: 98vh;
  padding: 1vh 20px;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: #fff;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  margin-right: 10px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.task-list {
  margin-top: 10px;
  padding: 10px;
  width: 96%;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  overflow-y: scroll;
  overflow-x: hidden;
}

.task-item {
  position: relative;
  display: flex;
  padding: 10px;
  margin-bottom: 10px;
  height: 40px;
  border-bottom: 1px solid #eee;
  border-radius: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.task-title {
  font-size: 16px;
  color: #333;
}

.task-time {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 10px;
  color: rgba(82, 74, 74, 0.5);
}

.task-priority {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.task-submit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin-top: 10px;
  /* width: 150px; */
  background-color: rgba(255, 255, 255, 0);
  /* 白色，但透明度为0，即完全透明 */
  color: #43abb2;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  border-radius: 5px;
}

.bottom-tab {
  display: flex;
  justify-content: space-around;
  background-color: rgba(255, 255, 255, 0);
  /* 白色，但透明度为0，即完全透明 */
  padding: 10px 0;
  height: 30px;
  width: 90vw;
  border-top: 1px solid #eee;
  text-align: center;
}

.tab-item-default {
  font-size: 14px;
  color: #4c88ad;
  height: 100%;
  width: 25%;
  opacity: 0.5;
}

.tab-item-active {
  font-size: 14px;
  height: 100%;
  width: 25%;

  color: #4c88ad;
}

.task-priority {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
  animation: fadeIn 0.5s ease-in-out;
}

.priority-low {
  background-color: #4CAF50;
}

.priority-medium {
  background-color: #FFC107;
}

.priority-high {
  background-color: #F44336;
}

.swipe-buttons {
  display: flex;
  align-items: center;
  height: 100%;
}

.complete-btn {
  /* margin: 10px; */
  border-radius: 0;
  background-color: #4CAF50;
  /* 完成按钮背景色 */
  color: white;
  border-radius: 10px;
  padding: 2vw;
  font-size: small;
}

.task-count {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.add-count-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.add-count-button:hover {
  opacity: 0.9;
}
</style>